<!-- 课表的页面 -->
<template>
  <div class="cq_bottom_table">
    <div class="h_title sbFlex">
      <div class="h_title_l">课表管理</div>
    </div>
    <div class="ss_box">
      <el-form
        :inline="true"
        :model="objForm"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="学期：" v-if="emu.semesterList">
          <el-select
            filterable
            v-model="objForm.semesterId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in emu.semesterList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年级：" v-if="emu.gradeList">
          <el-select
            filterable
            v-model="objForm.gradeId"
            @change="getadminSchoolTimetableClassCourseList"
            placeholder="请选择"
          >
            <el-option
              v-for="item in emu.gradeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <tableBox
        :tableArr="tableArr"
        :tableData="tableData"
        :total="total"
        :pageIndex="1"
        :pagination="false"
        @edit="editClass"
      ></tableBox>
    </div>
    <el-dialog
      center
      :visible.sync="sectionEditShow"
      width="765px"
      :before-close="
        () => {
          getadminSchoolTimetableClassCourseList()
          sectionEditShow = false
        }
      "
    >
      <div class="ss_box_con" @click="visible = false" v-if="sectionEditShow">
        <div class="ss_box_con_con cenFlex">
          <div class="ss_box_con_con_label"></div>
          <div
            class="ss_box_con_title_box cenFlex"
            v-for="week in 7"
            :key="'week' + week"
          >
            周{{ week == 7 ? '日' : $convertNum(week) }}
          </div>
        </div>
        <div class="amclassTimeTableList">
          <div
            class="ss_box_con_con"
            v-for="(item, ix) in amclassTimeTableList"
            :key="ix"
          >
            <div class="ss_box_con_con_label">
              第{{ $convertNum(ix + 1) }}讲
            </div>

            <div
              class="cenFlex"
              :class="
                subjectItem.subjectName
                  ? 'ss_box_con_con_box_act'
                  : 'ss_box_con_con_box'
              "
              v-for="(subjectItem, index) in item"
              :key="'subjectItem' + index"
              @contextmenu.prevent="openMenu($event, subjectItem, index, ix)"
              :style="{ opacity: !subjectItem.classTimetableCourseId ? 0 : 1 }"
            >
              {{ subjectItem.subjectName || '+' }}
              <ul
                v-if="
                  visible &&
                    selectedTag.index == index &&
                    selectedTag.ix == ix &&
                    !selectedTag.id
                "
                :style="{ left: left + 'px', top: top + 'px' }"
                class="contextmenu"
              >
                <li
                  v-for="(section, ids) in emu.subject"
                  :key="'section' + ids"
                  @click.stop="changeSectionClass(section, subjectItem)"
                >
                  {{ section.value }}
                </li>
              </ul>
              <ul
                v-if="
                  visible &&
                    selectedTag.index == index &&
                    selectedTag.ix == ix &&
                    selectedTag.id
                "
                :style="{ left: left + 'px', top: top + 'px' }"
                class="contextmenu"
              >
                <li @click.stop="delSectionClass">删除</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pmclassTimeTableList">
          <div
            class="ss_box_con_con"
            v-for="(item, ix) in pmclassTimeTableList"
            :key="ix"
          >
            <div class="ss_box_con_con_label">
              第{{ $convertNum(ix + amclassTimeTableList.length + 1) }}讲
            </div>

            <div
              class="cenFlex"
              :class="
                subjectItem.subjectName
                  ? 'ss_box_con_con_box_act'
                  : 'ss_box_con_con_box'
              "
              v-for="(subjectItem, index) in item"
              :key="'subjectItem' + index"
              @contextmenu.prevent="
                openMenu(
                  $event,
                  subjectItem,
                  index,
                  ix + amclassTimeTableList.length
                )
              "
              :style="{
                opacity: !subjectItem.classTimetableCourseId ? 0 : 1
              }"
            >
              {{ subjectItem.subjectName || '+' }}
              <ul
                v-if="
                  visible &&
                    selectedTag.index == index &&
                    selectedTag.ix == ix + amclassTimeTableList.length
                "
                :style="{ left: left + 'px', top: top + 'px' }"
                class="contextmenu"
              >
                <li
                  v-for="(section, ids) in emu.subject"
                  :key="'section' + ids"
                  @click.stop="changeSectionClass(section, subjectItem)"
                >
                  {{ section.value }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearClassData">清空</el-button>
        <el-button
          type="primary"
          @click="
            getadminSchoolTimetableClassCourseList()
            sectionEditShow = false
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  adminSchoolTimetableClassCourseList,
  adminSchoolTimetableClassCourseDetail,
  adminSchoolTimetableClassCourse,
  adminSchoolTimetableClassCourseClear
} from '@/api/lcmapi.js'

export default {
  props: {
    // 是否开启序号的展示
    emu: {
      type: [Object],
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      objForm: {
        gradeId: '', // 年级的id
        semesterId: '',
        schoolId: this.$route.query.id
      },
      tableArr: [
        {
          prop: 'className',
          label: '班级'
        },
        {
          type: 'html',
          prop: 'courseCountHtml',
          label: '排课情况'
        },
        {
          type: 'btnArr',
          label: '操作',
          prop: 'configBtn',
          fixed: 'right',
          width: 180
        }
      ],
      tableData: [],
      total: 0,
      currPage: 1,
      classTimeTableObj: {},
      amclassTimeTableList: [],
      pmclassTimeTableList: [],
      sectionEditShow: false,
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {}
    }
  },
  components: {
    tableBox: resolve => require(['@/components/table.vue'], resolve)
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.objForm = {
      gradeId: this.emu.gradeList[0] ? this.emu.gradeList[0].id : '', // 年级的id
      semesterId: this.emu.semesterList[0] ? this.emu.semesterList[0].id : '',
      schoolId: this.$route.query.id
    }
    // this.getadminSchoolTimetableClassCourseList();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {},
  methods: {
    // 点击排课
    async editClass (obj) {
      let { semesterId, classId } = obj.row
      this.selectedTag.row = {
        semesterId,
        classId
      }
      let res = await adminSchoolTimetableClassCourseDetail({
        classId: classId,
        semesterId: semesterId
      })
      if (res[0]) {
        if (res[1].msg == '没有课表') {
          this.$emit('setSection', null)
        }
        return
      }
      this.classTimeTableObj = obj.row
      // this.classTimeTableList = res[1].data
      let amclassTimeTableList = []
      let pmclassTimeTableList = []
      res[1].data.forEach(item => {
        for (let amIndex = 0; amIndex < item.amNum; amIndex++) {
          amclassTimeTableList[amIndex] = amclassTimeTableList[amIndex] || []
          item.morning.forEach(am => {
            if (am.sortNo == amIndex + 1) {
              amclassTimeTableList[amIndex][item.weekday - 1] = am
            }
          })
        }
        for (let pmIndex = 0; pmIndex < item.pmNum; pmIndex++) {
          pmclassTimeTableList[pmIndex] = pmclassTimeTableList[pmIndex] || []
          item.afternoon.forEach(pm => {
            if (pm.sortNo == pmIndex + 1 + item.amNum) {
              pmclassTimeTableList[pmIndex][item.weekday - 1] = pm
            }
          })
        }
      })
      this.amclassTimeTableList = this.returnWeek(amclassTimeTableList)
      this.pmclassTimeTableList = this.returnWeek(pmclassTimeTableList)
      console.log(this.amclassTimeTableList, this.pmclassTimeTableList)
      this.sectionEditShow = true
    },
    // 更新班级课表某个选项
    async changeSectionClass (section, item) {
      let res = await adminSchoolTimetableClassCourse({
        classTimetableCourseId: item.classTimetableCourseId,
        subject: section.id
      })
      if (res[0]) {
        return
      }
      this.$message.success('执行成功')
      this.editClass(this.selectedTag)
      this.visible = false
    },
    returnWeek (arr) {
      arr.forEach(item => {
        for (let weeks = 0; weeks < 7; weeks++) {
          for (let index in item) {
            if (index != weeks && !item[weeks]) {
              item[weeks] = {}
            }
          }
        }
      })
      return arr
    },
    openMenu (e, item, index, ix) {
      const menuMinWidth = 105
      this.left = e.layerX // 15: margin right
      this.top = e.layerY
      this.visible = true
      this.selectedTag = { ...this.selectedTag, ...item, index, ix }
    },
    // 获取当前班级的列表
    async getadminSchoolTimetableClassCourseList () {
      let res = await adminSchoolTimetableClassCourseList(this.objForm)
      if (res[1]) {
        let tableData = []
        res[1].data
          .filter(item => item)
          .forEach((item, ix) => {
            tableData.push({
              ...item,
              ...{
                courseCountHtml: `已排<span style="font-size:20px;font-weight:600;margin:0px 5px;">${item.courseCount ||
                  0}</span>课时`,
                configBtn: [
                  {
                    label: '排课',
                    key: 'edit'
                  }
                ]
              }
            })
          })
        this.tableData = tableData
      }
    },
    // 点击清空排课数据
    async clearClassData () {
      let { semesterId, classId } = this.selectedTag.row
      let res = await adminSchoolTimetableClassCourseClear({
        semesterId,
        classId
      })
      if (res[0]) {
        return
      }
      this.$message.success('执行成功')
      this.editClass(this.selectedTag)
      this.visible = false
    }
  }
}
</script>
<style lang="scss">
.flex {
  display: flex;
}
.amclassTimeTableList {
  border-bottom: 1px #ececec solid;
}
.pmclassTimeTableList {
  padding-top: 25px;
}
.content_box {
  padding: 20px 25px;
  background: #ffffff;
  border-radius: 6px;
  .h_title {
    padding: 16px 0px;
    padding-left: 20px;
    font-size: 18px;
    border-bottom: 1px #ececec solid;
    margin-top: 20px;
  }
  .h_title {
    padding: 16px 0px;
    padding-left: 20px;
    font-size: 18px;
    border-bottom: 1px #ececec solid;
  }
  .ss_box_title {
    width: 100%;
    font-size: 18px;
    margin-bottom: 25px;
  }
  .ss_box {
    flex-wrap: wrap;
    padding-top: 25px;
  }
  .ss_box_con {
    position: relative;
    .ss_box_con_con {
      font-size: 16px;
      align-items: center;
      margin-bottom: 25px;
      display: flex;
    }
    .ss_box_con_title {
      font-size: 16px;
      align-items: center;
      margin-bottom: 25px;
      display: flex;
    }
    .ss_box_con_con_box,
    .ss_box_con_con_box_act {
      width: 80px;
      height: 34px;
      background: rgba(0, 102, 250, 0.1);
      color: #0066fa;
      margin-right: 28px;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      white-space: nowrap;
      &_act {
        background: rgba(112, 197, 69, 0.1);
        color: #70c545;
      }
    }
    .ss_box_con_title_box {
      width: 80px;
      height: 34px;
      margin-right: 28px;
    }
    .ss_box_con_con_label {
      width: 90px;
    }
  }
}
.contextmenu {
  margin: 0;
  background: #fff;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  z-index: 999999;
  min-width: 100px;
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    text-align: center;
    &:hover {
      background: #eee;
      color: #0066fa;
    }
  }
}
</style>
